<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
          <el-form-item label="询价单号" prop="askNO">
            <el-input v-model="queryParams.askNO" placeholder="请输入询价单号" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="询价日期" prop="askDate">
            <el-input v-model="queryParams.askDate" placeholder="请输入采购单号" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="业务员" prop="salesman">
            <el-input v-model="queryParams.salesman" placeholder="请输入业务员" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="供应商" prop="supplier">
            <el-input v-model="queryParams.supplier" placeholder="请输入供应商名称" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="queryParams.status" placeholder="请选择询价单审核状态">
              <el-option label="审核通过" value="审核通过"></el-option>
              <el-option label="待审核" value="待审核"></el-option>
              <el-option label="审核打回" value="审核打回"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>

        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
          </el-col>
          <!-- <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
              >修改</el-button>
            </el-col> -->
          <el-col :span="1.5">
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
              @click="handleDelete">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-tooltip placement="top">
          <div slot="content">点击任意一行列，即可在下方查看询价单明细记录</div>
          <el-table :data="orderdata" v-loading="loading" @row-click="showTab">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="询价单号" prop="askNO"></el-table-column>
            <el-table-column label="询价日期" prop="askDate"></el-table-column>
            <el-table-column label="业务员" prop="salesman"></el-table-column>
            <el-table-column label="供应商" prop="supplier"></el-table-column>
            <el-table-column label="采购日期" prop="requestDate"></el-table-column>
            <el-table-column label="收货地址" prop="receiveaddress"></el-table-column>
            <el-table-column label="公司电话" prop="phone"></el-table-column>
            <el-table-column label="传真" prop="fax"></el-table-column>
            <el-table-column label="供应商电话" prop="supplierphone"></el-table-column>
            <el-table-column label="审核状态" prop="status"></el-table-column>

            <el-table-column label="操作" align="center" width="150px" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete"
                  @click="handleDelete1(scope.row)">审核</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete"
                  @click="handleDelete1(scope.row)">退回</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tooltip>
        <el-dialog title="询价单信息" :visible.sync="open" width="30%" center>
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="询价单号" prop="askNO">
              <el-input v-model="form.askNO" placeholder="请输入询价单号"></el-input>
            </el-form-item>
            <el-form-item label="询价日期" prop="askDate">
              <el-input v-model="form.askDate" placeholder="请输入询价日期"></el-input>
            </el-form-item>
            <el-form-item label="业务员" prop="salesman">
              <el-input v-model="form.salesman" placeholder="请输入业务员名称"></el-input>
            </el-form-item>
            <el-form-item label="供应商" prop="supplier">
              <el-input v-model="form.supplier" placeholder="请输入供应商"></el-input>
            </el-form-item>
            <!-- <el-form-item label="" prop="requestDate">
            -->
               <el-form-item label="采购日期" prop="requestDate">
              <el-date-picker type="date" placeholder="选择采购日期" v-model="form.requestDate" style="width: 240px;" />

            </el-form-item>
            <el-form-item label="收货地址" prop="receiveaddress">
              <el-input v-model="form.receiveaddress" placeholder="请输入收货地址"></el-input>
            </el-form-item>
            <el-form-item label="公司电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入公司电话"></el-input>
            </el-form-item>
            <el-form-item label="传真" prop="fax">
              <el-input v-model="form.fax" placeholder="请输入传真号"></el-input>
            </el-form-item>
            <el-form-item label="供应商电话" prop="supplierphone">
              <el-input v-model="form.supplierphone" placeholder="请输入供应商电话"></el-input>
            </el-form-item>
             <el-form-item label="审核状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择审核状态">
                <el-option label="审核通过" value="审核通过"></el-option>
                <el-option label="待审核" value="待审核"></el-option>
                <el-option label="审核退回" value="审核退回"></el-option>
              </el-select>
            </el-form-item>
          
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>

          </div>
        </el-dialog>

        <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
          :total="total" />

        <el-tabs v-model="activeName" v-if="showCard">
          <el-tab-pane label="询价单明细" name="first">
            <h2 align="center">{{ askNO }}询价单明细</h2>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddComm">新增明细</el-button>
              </el-col>
            </el-row>
            <el-table :data="detailedData" v-loading="loading">
              <el-table-column prop="describe" label="物品描述" align="center">
                <el-table-column prop="id" label="代号" align="center" />
                <el-table-column prop="name" label="名称" align="center" />
                <el-table-column prop="size" label="规格" align="center" />
                <el-table-column prop="material" label="材质" align="center" />
                <el-table-column prop="conversionrate" label="转化率" align="center" />
              </el-table-column>
              <el-table-column prop="Delivery" label="交期" align="center" />
              <el-table-column align="center" label="主单位">
                <el-table-column prop="number" align="center" label="领用数量" />
                <el-table-column prop="company" align="company" label="单位" />
              </el-table-column>
              <el-table-column align="center" label="副单位">
                <el-table-column align="center" prop="number1" label="领用数量" />
                <el-table-column align="center" prop="company1" label="单位" />
              </el-table-column>


              <el-table-column prop="remark" label="备注" align="center" />
              <el-table-column prop="packages" label="操作" align="center" width="150px" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-edit"
                    @click="handleUpdateComm(scope.row)">修改</el-button>
                  <el-button size="mini" type="text" icon="el-icon-delete"
                    @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog :title="titleComm" :visible.sync="openComm" width="500px" append-to-body>
      <el-form :model="formComm" :rules="rulesComm" ref="formComm" label-width="100px">
        <el-form-item label="代号" prop="id">
          <el-input v-model="formComm.id" placeholder="请输入代号" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="formComm.name" placeholder="请输入名称" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="规格" prop="size">
          <el-input v-model="formComm.size" placeholder="请输入规格" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="材质" prop="material">
          <el-input v-model="formComm.material" placeholder="请输入材质" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="转化率" prop="conversionrate">
          <el-input v-model="formComm.conversionrate" placeholder="请输入转化率" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="交期" prop="Delivery">
          <el-input v-model="formComm.Delivery" placeholder="请输入交期" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="主单位领用数量" prop="number">
          <el-input v-model="formComm.number" placeholder="请输入主单位领用数量" style="width: 240px;" />
        </el-form-item>
        <!-- <el-form-item label="生产要求" prop="productionRequirements">
           <el-input type="textarea" resize="none" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.productionRequirements">
            </el-input>
         </el-form-item> -->
        <el-form-item label="主单位" prop="company">
          <el-input v-model="formComm.company" placeholder="请输入主单位" style="width: 240px;" />
          <!-- <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.productionTechnique">
            </el-input> -->
        </el-form-item>
        <el-form-item label="副单位领用数量" prop="number1">
          <el-input v-model="formComm.number1" placeholder="请输入副单位领用数量" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="副单位" prop="company1">
          <el-input v-model="formComm.company1" placeholder="请输入副单位" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="副单位领用数量" prop="number1">
          <el-input v-model="formComm.number1" placeholder="请输入交期" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formComm.remark" placeholder="请输入备注" style="width: 240px;" />
        </el-form-item>

        <!-- <el-form-item label="正唛" prop="frontMark">
           <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.frontMark">
            </el-input>
         </el-form-item>
         <el-form-item label="侧唛" prop="sideMark">
           <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.sideMark"></el-input>
         </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormComm">确 定</el-button>
        <el-button @click="cancelComm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>


  
   <script>
    export default{
    data() {
      return {
        title:null,
         titleComm:null,
        total:0,
        open:false,
        openComm:false,
        form:{},
        formComm:{},
        rules:{},
        rulesComm:{},
        orderNo: '',
        textarea: '',
        input1: '',
        input2: '',
        input3: '',
        orderNo: '',
      showCard: true,
      activeName: 'first',
      orderdata: [{
        askNO: 'ANO9876678',
        salesman: '业务员1',
        supplier: '供应商A',
        requestDate: '2021-02-16',
        askDate: '2021-01-01',
        receiveaddress: '福建省泉州市青山区天河大道111',
        saleman: '业务员A',
        phone: '18978899090',
        fax: '0799878782',
        supplierphone: '18988989898',
        producer:'制单人1',
        ProductDay:'制单日期1',
        editman:'修改人1',
        editDay:'修改日期1',
        status:'待审核',
       
      },{
        askNO: 'ANO9876699',
        salesman: '业务员2',
        supplier: '供应商C',
        requestDate: '2023-09-16',
        askDate: '2023-07-12',
        receiveaddress: '福建省泉州市青山区天河大道111',
        saleman: '业务员C',
        phone: '18978899878',
        fax: '0799878982',
        supplierphone: '18988980988',
        status: '审核通过',
       
      },{
        askNO: 'ANO9877999',
        salesman: '业务员3',
        supplier: '供应商E',
        requestDate: '2024-11-13',
        askDate: '2024-12-09',
        receiveaddress: '福建省泉州市青山区天河大道98',
        saleman: '业务员C',
        phone: '18978899976',
        fax: '0799878992',
        supplierphone: '18988981188',
        status: '审核打回',
       
      }],

        loading: false,
        dialogVisible: false,
        editForm: {
      //     orderNo: 'DM123456',
       
      //  requestDept: '包装车间',
      //  RequestorderNo: 'QGD1811191879',
      //  requestDate: '2021-01-01',
      //  requestType: '按单采购',
      //  requestman: '业务员A',
      //  requestname: '外箱(WX)',
      //  contractNo: 'OD298765545',
       }, 

        detailedData: [{
          id: 'WX-YL15118',
          name: 'YL15118外箱',
          size: '规格1',
          material: '材质1',
          conversionrate: '1',
          Delivery: '交期1',
          number:'领用数量1',
          company:'领用主单位1',
          number1:'领用副数量1',
          company1:'领用副单位1',
          remark:'备注1',
        }, {
          id: 'CT-YL018716',
          name: '托盘',
          size: '规格2',
          material: '材质2',
          conversionrate: '1',
          Delivery: '交期2',
          number:'领用数量2',
          company:'领用主单位1',
          number1:'领用副数量2',
          company1:'领用副单位2',
          remark:'备注2',
        },{
          id: 'BZ-YL019714',
          name: '圆盘',
          size: '规格3',
          material: '材质3',
          conversionrate: '1',
          Delivery: '交期3',
          number:'领用数量3',
          company:'领用主单位3',
          number1:'领用副数量2',
          company1:'领用副单位3',
          remark:'备注3',
        }],

        // pickerOptions: {
        //   disabledDate(time) {
        //     return time.getTime() > Date.now();
        //   },
        // },
          // value1: "",
          // value2: "",
        
        defaultProps: {
            children: 'children',
            label: 'label'
        },

        total: 0,
      loading: false,
      radio: 3,
        queryParams:{
          date1: '',
        date2: '',
        radio: 3,
        radio1: 3,
        radio2: 3,
        radio3: 3,
        radio4: 3,
        radio5: 3,
        },
        showSearch: true,
        single: false,
        multiple: false,
        tableData:[],
      }
    },
    methods: {
      showTab(row) {
      this.orderNo = row.orderNo;
      this.showCard = true;
      console.log('Clicked row:', row);
    },
    handleEdit(row) {
      this.currentEditRow = { ...row }; // 深拷贝当前行数据到editForm
      this.open= true; // 或者直接赋值，取决于你是否需要在关闭弹窗时重置表单
      this.dialogVisible = true;
    },
    // handleUpdate() {
    //   // const index = this.orderdata.findIndex(item => item.RequestorderNo === this.currentEditRow.RequestorderNo);
    //   // if (index !== -1) {
    //   //   this.$set(this.orderdata, index, { ...this.editForm }); // 使用$set来确保响应性
    //   // }
    //   // this.dialogVisible = false;
    //   this.open = { ...row };
    //   this.dialogVisible = true;
    // },

    submitForm(){
      this.open = false;
    },
    cancel(){this.open = false;},
    handleQuery() {
      this.loading = false;
    },
      filterNode(value, data) {
          if (!value) return true;
          return data.label.indexOf(value) !== -1;
        },
        handleNodeClick(data){
          console.log(data);
        },
        handleAdd() {
          this.title = '新增'
          this.open = true;
          this.isEdit = false;
        },
         handleAddComm(){
           this.titleComm = '新增询价单明细'
           this.openComm = true;
         },
         handleUpdateComm(row){
            this.titleComm = '编辑询价单明细'
            this.openComm = true;
            this.formComm = row;
          },
    submitFormComm(){
      this.openComm = false;
    },
    cancelComm(){this.openComm = false;},
    showTab(row) {
      this.showCard = true
    },
        handleUpdate(row) {
          this.title = '编辑订单'
          this.open = true;
          this.isEdit = false;
          this.form = row;
        },
        handleDelete(){},
        handleExport(){},
        handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.userId);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
    },
    
   }
   </script>

<style lang="scss" scoped>
.radio-group .el-radio {
  margin-right: 0px;
}

.radio-group {
  border-radius: 1px;
  border: 1px solid #dcdfe6;
}
</style>
